<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="Handheldfriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!-- 显示窗口 宽度 是 客户端的 屏幕 宽度 （就是 满屏 ！），显示的文字和图形的初始比例 是 1.0 -->
    <link rel="stylesheet" href="css/layui.mobile.css">
    <link rel="stylesheet" type="text/css" href="css/style.css"><!-- 基本样式 -->
    <link rel="prefetch" href="http://cpbridge.bceapp.com/index.html" />
    <link rel="prefetch" href="http://cpbridge.bceapp.com/Single-circle.html" />
    <link rel="prefetch" href="http://cpbridge.bceapp.com/message.html" />
    <link rel="prefetch" href="http://cpbridge.bceapp.com/activity.html" />
    <link rel="prefetch" href="http://cpbridge.bceapp.com/mine.html" />
    <script src="js/common.js"></script>
    <title>消息中心</title>
    <style>
        .m-user-messageCenter{
            border-bottom: 1px solid #f5f5f5;

        }
        .jshd{
            position: relative;
            right: 0;
            transition: right .3s
        }
        .jshd.active{
            right: 100px;
            transition: right .3s
        }
        .jshd .btnbox{
            width: 100px;
            height: 81px;
            position: absolute;
            left: 100%;
            top:0;
        }
        .btnbox a{
            width: 50px;
            float: left;
            height: 81px;
            text-align: center;
            line-height: 81px;
            color: #FFFFFF;
            background-color: #1e98f2;
        }
        .btnbox a.del{
            background-color: #f36662;
            color: #FFFFFF;
        }
        #list{
            padding-bottom: 60px;
            overflow-x: hidden;
        }
        .dn{
            display: none;
        }
       .spinner{width:20px;height:20px;position:fixed;z-index:1002;top:50%;margin-top:-10px;left:50%;margin-left:-10px}.container1>div,.container2>div,.container3>div{width:6px;height:6px;background-color:#ff536a;border-radius:100%;position:absolute;-webkit-animation:bouncedelay 1.2s infinite ease-in-out;animation:bouncedelay 1.2s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.spinner .spinner-container{position:absolute;width:100%;height:100%}.container2{-webkit-transform:rotateZ(45deg);transform:rotateZ(45deg)}.container3{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}.circle1{top:0;left:0}.circle2{top:0;right:0}.circle3{right:0;bottom:0}.circle4{left:0;bottom:0}.container2 .circle1{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.container3 .circle1{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.container1 .circle2{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}.container2 .circle2{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}.container3 .circle2{-webkit-animation-delay:-0.7s;animation-delay:-0.7s}.container1 .circle3{-webkit-animation-delay:-0.6s;animation-delay:-0.6s}.container2 .circle3{-webkit-animation-delay:-0.5s;animation-delay:-0.5s}.container3 .circle3{-webkit-animation-delay:-0.4s;animation-delay:-0.4s}.container1 .circle4{-webkit-animation-delay:-0.3s;animation-delay:-0.3s}.container2 .circle4{-webkit-animation-delay:-0.2s;animation-delay:-0.2s}.container3 .circle4{-webkit-animation-delay:-0.1s;animation-delay:-0.1s}@-webkit-keyframes bouncedelay{0%,80%,100%{-webkit-transform:scale(0.0)}40%{-webkit-transform:scale(1.0)}}@keyframes bouncedelay{0%,80%,100%{transform:scale(0.0);-webkit-transform:scale(0.0)}40%{transform:scale(1.0);-webkit-transform:scale(1.0)}}#loading .mask{position:fixed;width:100%;background-color:#fff;top:0;left:0;height:100%;z-index:1001}
    </style>
</head>
<body style="position: static">
<div id="loading">
    <div class="mask"></div>
    <div class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</div>
<div class="scroll"  style="position:absolute; overflow:scroll; top:0; left:0; bottom:0; right:0">
      <div class="messagext">
        <img src="cssimg/massagext.png">
        <p>这里是消息中心，您可以在这里管理所有消息哦~</p>
      </div>
        <div id="list">
        </div>
</div>
    <footer>
        <ul class="tab-nav">
           <li>
               <a href="index.html">
                    <div class="icon-box">
                        <i class="icon1"></i>
                    </div>
                    <div>
                        <span >首页</span>
                    </div>
               </a>
           </li>
             <li>
               <a href="Single-circle.html">
                    <div class="icon-box">
                        <i class="icondsp"></i>
                    </div>
                    <div>
                        <span>单身圈</span>
                    </div>
               </a>
           </li>
            <li>
               <a href="">
                    <div class="icon-box">
                        <i class="icon-xxhover"></i>
                    </div>
                    <div>
                        <span class="active">消息</span>
                    </div>
               </a>
           </li>
            <li>
               <a href="activity.html">
                    <div class="icon-box">
                        <i class="iconhd"></i>
                    </div>
                    <div>
                        <span>活动</span>
                    </div>
               </a>
           </li>
            <li>
               <a href="mine.html">
                    <div class="icon-box">
                        <i class="iconmy"></i>
                    </div>
                    <div>
                        <span>我的</span>
                    </div>
               </a>
           </li>
        </ul>
    </footer>
</body>
</html>
<script src="js/jquery/zepto.js"></script>
<!--<script src="js/jquery/jquery-2.2.4.min.js"></script>-->
<script src="js/jquery/touch.js"></script>
<script src="js/jquery/layer.js"></script>
<script src="js/utils.js"></script>
<script>
    Utils.historyBack(function () {
        window.location.href = 'index.html';
    });
    var timev=Math.floor(new Date().getTime()/1000);
    $.ajax({
        type:"GET",
        url : getRequestUrl("/notify/get_type"),
        success : function(datas) {
            console.log(datas.response_params.result);
            var arr = datas.response_params.result;
            var str="";
            $.each(arr,function (i,v) {
                var $class="";
                if(v.unread_cnt==0){
                    $class="dn"
                }else {
                    $class=""
                }
                var $wz1="暂无新消息";
                var $wz2="暂无新消息";
                var $wz3="暂无新消息";
                if(v.unread_cnt>0){
                    $wz1="您有"+v.unread_cnt+"条新消息待处理";
                    $wz2="您有"+v.unread_cnt+"条匿名提问待处理";
                    $wz3="您报名了新的活动";
                }
                if(arr[i].notify_type_id==1){
                    str+=`
                          <div class="m-user-messageCenter" data-id=${arr[i].notify_type_id} onclick="getinfo(this)">
            <div class="item">
                  <div class="system-messages">
                      <img src="cssimg/systemMessage.png">
                      <div class="system-messages-shuzi ${$class}">${v.unread_cnt}</div>
                      <div class="basicInfo">
                          <span>`+v.notify_type_name+`
                          </span>
                          <p class="line1">${$wz1}</p>
                          <!--<i>07-21  8:00</i>-->
                      </div>
                  </div>
            </div>
      </div> `}else if(arr[i].notify_type_id==100){
                    str+=`
                    <div class="m-user-messageCenter" data-id=${arr[i].notify_type_id} onclick="getinfo(this)">
              <div class="system-messages">
                    <img src="cssimg/Anonymous.png">
                    <div class="system-messages-shuzi ${$class}">${v.unread_cnt}</div>
                  <div class="Anonymous">
                      <span>`+v.notify_type_name+`
                      </span>
                      <p class="line1">${$wz2}</p>
                      <!--<i>07-21  8:00</i>-->
                  </div>
              </div>
      </div>`}else if(arr[i].notify_type_id==2){
                        str+=`<div class="m-user-messageCenter" data-id=${arr[i].notify_type_id} onclick="getinfo(this)">
            <div class="item">
                  <div class="system-messages">
                      <img src="cssimg/systemMessage.png">
                      <div class="system-messages-shuzi ${$class}">${v.unread_cnt}</div>
                      <div class="basicInfo">
                          <span>`+v.notify_type_name+`
                          </span>
                          <p class="line1">${$wz3}</p>
                          <!--<i>07-21  8:00</i>-->
                      </div>
                  </div>
            </div>
      </div>`
                }
            });
            $(str).appendTo("#list");
            getnmly();

        },
        error : function(err) {
        	dealCPErrorResponse(err);
        }

    });
    //get_question_unread_cnt
   function getnmly() {
       $.ajax({
           type:"GET",
           url : getRequestUrl("/user/get_question_unread_cnt"),
           success : function(datas) {
               console.log(datas.response_params.result);
               var arr = datas.response_params.result;
               var classs =arr.question_self_unread_cnt==0?"dn":"";
               var wz=arr.question_self_unread_cnt==0?`暂无新消息`:`您有${arr.question_self_unread_cnt}条匿名提问待处理`;
               var str="";
               str+=` <div class="m-user-messageCenter" data-id="100" onclick="getinfo(this)">
                          <div class="system-messages">
                                <img src="cssimg/Anonymous.png">
                                <div class="system-messages-shuzi ${classs}">${arr.question_self_unread_cnt}</div>
                              <div class="Anonymous">
                                  <span>匿名提问</span>
                                  <p class="line1">${wz}</p>
                              </div>
                          </div>
                  </div>`;
               $(str).appendTo("#list");
               getylts();
           },
           error : function(err) {
               dealCPErrorResponse(err);
           }

       })
   }
    ///user/get_message_list
   function getylts() {
       $.ajax({
           type:"GET",
           url : getRequestUrl("/user/get_message_list"),
           data:{
               timestamp:timev,
               page_num:1,
               page_size:100
           },
           success : function(datas) {
               console.log(datas.response_params.result);
               var arr = datas.response_params.result;
               var str="";
               $.each(arr,function (i,v) {
                   str+=`<div class="jshd">
                          <div class="m-user-messageCenter" >
                                <div class="item">
                                      <div class="system-messages">
                                          <img src=`+v.portrait+` data-id=`+v.user_id+` onclick="getinfo2(this)">
                                          <div class="basicInfo" data-id=`+v.user_id+` onclick="getinfo2(this)">
                                              <span>`+v.nick_name+`
                                              </span>
                                              <p class="line1">${v.content}</p>
                                              <!--<i>07-21  8:00</i>-->
                                          </div>
                                      </div>
                                </div>
                          </div>
                        <div class="btnbox">
                                <a href="javascript:;" onclick="zdcz(this)" data-id=`+v.user_id+` class="zd">置顶</a>
                                <a href="javascript:;" onclick="delcz(this)" data-id=`+v.user_id+` class="del">删除</a>
                        </div></div>`
               });
               $(str).appendTo("#list");
               hd();
               $("#loading").hide();
           },
           error : function(err) {
               dealCPErrorResponse(err);
           }

       })
   }

    function getinfo(obj){
        var _this = $(obj);
        var id = _this.attr('data-id');
        if(id==1){
            window.location.href="System-message-details.html?id="+id;
        }else if(id==100){
            window.location.href="questions-anonymously.html?index=message&id="+id;
        }else if(id==2){
            window.location.href="Activityirelease.html?id="+id;
        }
    }
    function getinfo2(obj){
        var _this = $(obj);
        var id = _this.attr('data-id');
        window.location.href="liuyan.html?id="+id;
    }
    function zdcz(obj) {
        var id=$(obj).attr("data-id");
        //console.log(id)
        layer.open({
            content: '确认将该条留言置顶吗?'
            ,btn: ['取消', '置顶']
            ,skin: 'footer'
            ,yes: function(index){
                layer.close(index)
            }
            ,no:function (index) {
                $.ajax({
                    type:"POST",
                    url : getRequestUrl("/user/top_message_list"),
                    data:{
                       user_id:id,
                    },
                    success : function(datas) {
                        console.log(datas.response_params.result);
                        var arr = datas.response_params.result;
                        if(arr==0){
                            layer.open({content: '置顶成功',time:1,skin: 'msg'})
                        }else {
                            layer.open({content: '置顶失败,请稍后重试',time:1,skin: 'msg'})
                        }
                    },
                    error : function(err) {
                    	dealCPErrorResponse(err);
                    }

                })

            }
        });
    }

    function delcz(obj) {
        var id=$(obj).attr("data-id");
        //console.log(id)
        layer.open({
            content: '确认将该条留言删除吗?'
            ,btn: ['取消', '确定']
            ,skin: 'footer'
            ,yes: function(index){
                layer.close(index)
            }
            ,no:function (index) {
                $.ajax({
                    type:"POST",
                    url : getRequestUrl("/user/del_message_list"),
                    data:{
                        user_id:id,
                    },
                    success : function(datas) {
                        console.log(datas.response_params.result);
                        var arr = datas.response_params.result;
                        if(arr==0){
                            layer.open({content: '删除成功',time:1,skin: 'msg'})
                        }else {
                            layer.open({content: '删除失败,请稍后重试',time:1,skin: 'msg'})
                        }
                    },
                    error : function(err) {
                    	dealCPErrorResponse(err);
                    }

                })

            }
        });
    }
    // 获取滑动距离
    function hd() {
        $(".jshd").swipeRight(function () {
            $(this).removeClass("active");
            console.log("右")
        });
        $(".jshd").swipeLeft(function () {
            console.log("左");
            $(this).siblings().removeClass("active");
            $(this).addClass("active");
        });
    }
    var overscroll = function(el) {
        el.addEventListener('touchstart', function() {
            var top = el.scrollTop
                , totalScroll = el.scrollHeight
                , currentScroll = top + el.offsetHeight;
                    //If we're at the top or the bottom of the containers
                    //scroll, push up or down one pixel.
                    //
                    //this prevents the scroll from "passing through" to
                    //the body.
            if(top === 0) {
                el.scrollTop = 1
            } else if(currentScroll === totalScroll) {
                el.scrollTop = top - 1
            }
        });
        el.addEventListener('touchmove', function(evt) {
                    //if the content is actually scrollable, i.e. the content is long enough
                    //that scrolling can occur
            if(el.offsetHeight < el.scrollHeight)
                evt._isScroller = true
        })
    };
    overscroll(document.querySelector('.scroll'));
    document.body.addEventListener('touchmove', function(evt) {
                    //In this case, the default behavior is scrolling the body, which
                    //would result in an overflow. Since we don't want that, we preventDefault.
        if(!evt._isScroller) {
            evt.preventDefault()
        }
    })

</script>
